<template>
    <div class="SecondNavBar">
        <div class="item" v-for="(item, index) in secondBarData" :key="index"
            :class="index === activeNum ? 'currentItem' : ''" @click="clickSecondBarItem(index)">
            {{ item.name }}
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'

const activeNum = ref(null)
const emit = defineEmits(['clickSecondBarItem'])
const props = defineProps({
    currentTag: {
        type: Object,
        default () {
            return {}
        },
    },
    secondBarData: {
        type: Array,
        default () {
            return []
        },
    },
})

const clickSecondBarItem = (index) => {
    if (activeNum.value == index) return
    activeNum.value = index
    emit('clickSecondBarItem', index)
}
watch(props.currentTag, (newVal) => {
    console.log(newVal)
})
</script>

<style lang="scss" scoped>
.SecondNavBar {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    width: 800px;
    .item {
        width:60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin-right: 20px;
        font-size: 14px;
        cursor: pointer;
        border-radius: 10px;
        overflow: hidden;
    }

    :nth-child(10) {

    }
}

.currentItem {
    color: #eb4f4f;
    background-color: #FDF5F5;

}
</style>
